<template>
    <div class="me-menu" id="meMenu">
        <ul class="me-menu-list">
            <li v-for="(menu,index) in firstMenuList" :key="index" class="me-menu-item">
                <router-link :to="{'path' : menu.menuUrl}" class="fx-row fx-row-center">
                  <i class="me-menu-icon iconfont" :class="[menu.menuIcon]" ></i>
                  <h5 class="me-menu-name text-color">
                      {{menu.menuName}}
                  </h5>
                  <div class="fx text-right">
                        <span v-if="menu.tip" class="me-menu-tips text-color-light">{{userBase.availableCount}}{{menu.tip}}</span>
                        <i class="me-menu-icon iconfont icon-arrow arrow-color"></i>
                  </div>

                </router-link>
            </li>
        </ul>

        <ul class="me-menu-list">
            <li v-for="(menu,index) in secondMenuList" :key="index" class="me-menu-item">
              <router-link :to="{'path' : menu.menuUrl}" class="fx-row fx-row-center">
                  <i class="me-menu-icon iconfont" :class="[menu.menuIcon]" ></i>
                  <h5 class="me-menu-name text-color">
                      {{menu.menuName}}
                  </h5>
                  <div class="fx text-right">
                        <span v-if="menu.tip" class="me-menu-tips text-color-light">{{menu.tip}}</span>
                        <i class="me-menu-icon iconfont icon-arrow arrow-color"></i>
                  </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<style lang="scss">
  .me-menu-list{
      margin-top: 25px;
    .me-menu-item{

        margin-top: 1px;
        background: #fff;

          &>a{
            padding: 15px;
          }
        .me-menu-name{
          font-size: 16px;
          margin-left: 10px;
          margin-right: 10px;
        }

        .me-menu-tips{
          font-size: 15px;
        }

        .me-menu-icon{
            font-size: 17px;
        }
        .me-menu-icon-color-01{
          color: #4A90E2;
        }
        .me-menu-icon-color-02{
          color: #F5A623;
        }
        .me-menu-icon-color-03{
          color: #7ED321;
        }
        .me-menu-icon-color-04{
          color: #E14C5E;
        }
    }
  }
</style>
<script>

    export default{
        name : "meMenu",
        props : ['userBase'],
        data(){
            return{
                firstMenuList : [
                    {
                        menuName : "我的预约",
                        menuIcon : "icon-myOrder me-menu-icon-color-01",
                         menuUrl  : "/order/my"

                    },
                    {
                        menuName : "我的代金劵",
                        menuIcon : "icon-coupon me-menu-icon-color-02",
                        tip      : "张代金劵",
                        menuUrl  : "/voucher/list/view"
                    },
                    {
                        menuName : "帮助",
                        menuIcon : "icon-help me-menu-icon-color-03",
                          menuUrl  : "/help/helpDoc"
                    }

                ],
                secondMenuList : [
                    {
                        menuName : "邀请有奖",
                        menuIcon : "icon-invite me-menu-icon-color-04",
                         menuUrl  : "/market/invitation"
                    }
                ]
            }
        },
        components:{

        }
    }
</script>
